<template>
  <div>
    <div>
      <div class="content">
        <div class="database-info">
          <div class="form-left-right">
            <el-form
              style="max-width: 1200px"
              :model="state.form"
              :rules="rules"
              ref="formRef"
              label-position="right"
            >
              <el-form-item label="资料名称：" prop="ziliaomingcheng">
                <el-input
                  size="large"
                  maxlength="150"
                  v-model="state.form.ziliaomingcheng"
                />
              </el-form-item>
              <el-form-item label="类型：" prop="leixing">
                <el-select
                  v-model="state.form.leixing"
                  size="large"
                  placeholder="类型"
                >
                  <el-option
                    v-for="item in state.option"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="项目：">
                <el-select
                  filterable
                  v-model="state.form.xiangmu"
                  size="large"
                  placeholder="选择项目"
                >
                  <el-option
                    v-for="item in state.projectList"
                    :key="item.xmNo"
                    :label="item.xiangmumingcheng"
                    :value="item.xmNo"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                class="vue-editor"
                label="资料介绍："
                prop="ziliaoneirong"
              >
                <editor :initValue="state.form.ziliaoneirong" @onVal="onVal" />
              </el-form-item>
              <el-form-item label="文件包：" prop="wenjianbao">
                <div>
                  <div style="display: flex; align-items: center">
                    <bjz-oss
                      :previewList="state.form.wenjianbao"
                      :accept="['.pdf', '.zip']"
                      :allowMultiple="true"
                      :size="500"
                      @success="successImg"
                      @remove="removeImg"
                    />
                    <span class="ml20">单个文件最多500M</span>
                  </div>
                  <div style="display: flex">
                    <el-input
                      style="width: 400px"
                      placeholder="请填写文件路径"
                      v-model="state.filePath"
                    />
                    <el-input
                      style="width: 200px; margin-left: 15px"
                      placeholder="请填写文件名称"
                      v-model="state.fileName"
                    />
                    <el-button style="margin-left: 20px" @click="upload()"
                      >提交</el-button
                    >
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="状态：">
                <el-radio-group v-model="state.form.shangjia">
                  <el-radio :label="1">上架</el-radio>
                  <el-radio :label="0">下架</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="button-group">
                <el-button
                  style="margin-left: 100px"
                  type="primary"
                  @click="submitForm(formRef)"
                  >提交</el-button
                >
                <el-button
                  type="primary"
                  style="margin-left: 50px"
                  @click="$router.go(-1)"
                  >取消</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { baseMsg } from "@/utils/utils";
import { GetDictionaryTree } from "@/api/system";
import { GetProjectList } from "@/api/project";
import { GetDatabase, AddDatabase, EditDatabase } from "@/api/database";
const route = useRoute();
const router = useRouter();
const formRef = ref(null);
const validateImg = (rule, value, callback) => {
  if (state.form.wenjianbao && state.form.wenjianbao.length) {
    callback();
  } else {
    callback(new Error("请上传文件包"));
  }
};
const rules = {
  ziliaomingcheng: [
    {
      required: true,
      message: "请输入资料库名称",
      trigger: "blur",
    },
  ],
  leixing: [
    {
      required: true,
      message: "请选择资料类型",
      trigger: "change",
    },
  ],
  ziliaoneirong: [
    {
      required: true,
      message: "请输入资料介绍",
      trigger: "blur",
    },
  ],
  wenjianbao: [
    {
      required: true,
      trigger: "blur",
      validator: validateImg,
    },
  ],
};
const state = reactive({
  form: {
    ziliaomingcheng: "",
    leixing: "",
    xiangmu: "",
    ziliaoneirong: "",
    wenjianbao: [],
    shangjia: 0,
  },
  filePath: "",
  fileName: "",
  option: [],
  projectList: [],
});

// 上传文件路径的文件到服务器
const upload = async () => {
  if (state.filePath || state.fileName) {
    if (state.filePath.includes(".pdf") || state.filePath.includes(".zip")) {
      const obj = {
        fileName: state.fileName,
        filePath: state.filePath,
        fileUrl: state.filePath,
        fileType: state.filePath.substring(state.filePath.lastIndexOf(".")),
        fileSuffix: state.filePath.substring(
          state.filePath.lastIndexOf(".") + 1
        ),
      };
      successImg(obj);
    } else {
      baseMsg("请上传pdf或zip文件", false);
    }
  } else {
    baseMsg("请填写文件路径或文件名称", false);
  }
};

// 资料库类型下拉查询
const GetType = async () => {
  const res = await GetDictionaryTree({ dicModel: "ziliaokuleixing" });
  if (res.code == 4201) {
    state.option = res.data;
  }
};
// 获取所有项目
const GetProject = () => {
  GetProjectList({ current: 1, size: 9999 }).then((res) => {
    if (res.code == 4201) {
      state.projectList = res.data.records;
    }
  });
};
const GetDatabaseInfo = () => {
  if (route.query.type === "edit") {
    GetDatabase({ id: route.query.id }).then((res) => {
      if (res.code === 4201) {
        state.form = res.data;
      }
    });
  }
};
// 文件上传
const successImg = (res) => {
  state.form.wenjianbao.push(res);
};
// 文件删除
const removeImg = (index) => {
  state.form.wenjianbao.splice(index, 1);
};
// 富文本编辑器
const onVal = (val) => {
  state.form.ziliaoneirong = val;
};
// 提交表单
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (route.query.type == "add") {
        AddDatabase(state.form).then((res) => {
          if (res.code == 4202) {
            baseMsg("新增资料库成功");
            router.go(-1);
          }
        });
      }
      if (route.query.type == "edit") {
        EditDatabase(state.form).then((res) => {
          if (res.code == 4202) {
            baseMsg("编辑资料库成功");
            router.go(-1);
          }
        });
      }
    }
  });
};
GetDatabaseInfo();
GetProject();
GetType();
</script>
<style lang="scss" scoped>
.content {
  border: none !important;
}
.database-info {
  padding: 30px 100px;
  font-size: 20px;
  color: black;
  display: flex;
}
.el-form-item {
  display: flex;
  align-items: center;
  &.vue-editor {
    align-items: baseline;
  }
}
:deep(.form-left-right) {
  width: 100%;
  .el-form-item .el-form-item__label {
    min-width: 120px;
    margin-bottom: 0 !important;
  }
}
</style>
<style lang="scss">
.button-group {
  .el-form-item__content {
    width: 100% !important;
    justify-content: center;
  }
}
</style>
